<template>
  <div class="newRepair">
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">新增报修</span>
      <span class="header-wrap-right"></span>
    </div>
    <div class="uploader">
      <van-uploader v-model="list" :max-count="8"/>
    </div>
    <div class="newRepair-list">
      <span class="list-title">报修小区</span>
      <div class="list-content">
          <van-field disabled clearable v-model="defaults"/>
      </div>
    </div>
    <div class="newRepair-list">
      <span class="list-title">报修标题</span>
      <div class="list-content">
          <van-field clearable v-model="repair_title" placeholder="请填写报修标题" />
      </div>
    </div>
    <div class="newRepair-list">
      <span class="list-title">报修位置</span>
      <div class="list-content">
        <van-field clearable v-model="household_specific" placeholder="请填写详细报修位置（精确到房号）"/>
      </div>
    </div>
    <div class="newRepair-list">
      <span class="list-title">联系人姓名</span>
      <div class="list-content">
        <van-field clearable v-model="household_name" placeholder="请填写联系人姓名"/>
      </div>
    </div>
    <div class="newRepair-list">
      <span class="list-title">联系人电话</span>
      <div class="list-content">
        <van-field type="tel" clearable v-model="household_phone" placeholder="请填写联系人电话"/>
      </div>
    </div>
    <div class="newRepair-textarea">
      <div class="list-content">
         <van-field
          clearable
          class="minHeight"
          v-model="repair_content"
          type="textarea"
          placeholder="请输入详细报修内容"
          rows="6"
          autosize
        />
      </div>
    </div>
    <div style="padding-bottom:.5rem;">
      <div class="submit" @click="addlist">
        确定
      </div>
    </div>
  </div>
</template>
<script>
import { Uploader,Field } from 'vant';
import api from '../../api/api.js'
export default {
  data(){
    return{
      list:[],
      fileList: [],
      avatar:[],
      newImg: [],
      repair_title: '',
      household_name:'',
      household_phone:'',
      repair_content:'',
      defaults:'',
      defaultsId:null,
      household_specific:''
    }
  },
  created(){
    this.quarters()
  },
  methods:{
    goback(){
      this.$router.go(-1)
      // window.location.href = 'https://mall.nengyoukeji.com/app/index.php?i=23&c=entry&m=ewei_shopv2&do=mobile&wxref=mp.weixin.qq.com#wechat_redirect'
    },
  //获取绑定小区
    quarters(){
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...',
      });
      this.$get(api.quarters,{})
      .then((response) => {
        if(response.status==200){
          this.defaults = response.data.data.default_name
          this.defaultsId = response.data.data.default
          this.$toast.clear();
        }
      })
      .catch((error) => {
        this.$toast.clear();
        console.log(error);
      });
    },
    //上传
    upload(){
      this.$post(api.upload, {
        base64:this.avatar
      })
      .then((response) => {
          this.fileList = response.data.data.urls
          // 提交时候后台需要的参数
          this.$post(api.newincrease, {
            repair_imgs:this.fileList,
            repair_title: this.repair_title,
            repair_content: this.repair_content,
            household_name: this.household_name,
            household_phone: this.household_phone,
            residential_id: this.defaultsId,
            remark: this.household_specific
            })
          .then((response) => {
            if(response.data.code===0){
              this.$toast(response.data.msg)
              return
            }
            if(response.data.code===1){
              this.$toast('新增报修成功')
              this.list= []
              this.repair_title = ''
              this.household_name = ''
              this.household_phone = ''
              this.repair_content = ''
              this.household_specific = ''
            }
          })
          .catch((error) => {
            console.log(error);
          });
      })
    },
    // 提交
    addlist(){
      var reg = /^([1][0-9]{10})$/;
      if(this.list==0){
        this.$toast('请上传报修照片')
        return
      }
      if(!this.repair_title){
        this.$toast('报修标题不能少于三位数')
        return
      }
      if(!this.household_specific){
        this.$toast('请填写报修具体位置')
        return
      }
      if(!this.household_name){
        this.$toast('请填写联系人姓名')
        return
      }
      if(!this.household_phone){
        this.$toast('请填写联系人电话')
        return
      }
      if(!reg.test(this.household_phone)){
        this.$toast("手机格式不正确");
        return
      }
      if(!this.repair_content){
        this.$toast('请输入详细报修内容')
        return
      }
      this.list.map((element, index) => {
      // 创建Canvas对象(画布)
        let canvas =  document.createElement('canvas')
        // 获取对应的CanvasRenderingContext2D对象(画笔)
        let context = canvas.getContext('2d')
        // 创建新的图片对象
        let img = new Image()
        // 指定图片的DataURL(图片的base64编码数据)
        img.src = element.content
        // 监听浏览器加载图片完成，然后进行进行绘制
        img.onload = () => {
          // 指定canvas画布大小，该大小为最后生成图片的大小
          canvas.width = 450
          canvas.height = 350
          /* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
          如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/
          context.drawImage(img, 0, 0, 450, 350)
          // 将绘制完成的图片重新转化为base64编码，element.file.type为图片类型，0.92为默认压缩质量
          element.content = canvas.toDataURL(element.file.type,0.92)
          // 最后将base64编码的图片保存到数组中，留待上传。
          this.avatar.push(element.content)
          this.upload()
        }
      })
    },
  },
  components: {
    [Uploader.name]:Uploader,
    [Field.name]:Field,
  }
}
</script>
<style>
.van-cell-group{
  background: none;
}
.van-uploader__upload{
  width: 1.2rem;
  height: 1.2rem;
  background-color: #fff;
  border-radius: 0.12rem;
  border: 1px solid #57c5c6;
}
.van-uploader__preview-image{
  width: 1.2rem;
  height: 1.2rem;
}
.van-uploader__preview,.van-uploader__upload{
  margin: 0 .2rem .2rem .2rem;
}
.van-uploader__upload-icon{
  color: #000;
  font-size: .6rem;
}
.van-icon-delete:before{
  content: "\F041";
}
</style>
<style scoped>
.uploader{
  padding: 1.5rem .5rem .25rem .5rem;
}
.list-content{
  margin:.15rem .5rem;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: .2rem;
}
.newRepair .newRepair-list{
  margin-bottom: .3rem;
}
.newRepair .newRepair-list .van-cell{
  background: none;
  padding: .26rem .3rem;
}
.newRepair .newRepair-textarea .van-cell{
  background: #fff;
  padding: .15rem .15rem;
  border: 1px solid #fff;
  border-radius: .2rem;
}
.list-title{
  display: block;
  margin:0rem .8rem;
  color: #57c5c6;
}
.minHeight{
  min-height: 3rem;
  padding: .15rem;
}
.submit{
  margin: .3rem .5rem .25rem;
  height: 1rem;
  line-height: 1rem;
  color: #fff;
  text-align: center;
  background-image: linear-gradient(90deg, #FFC796 0%, #FD5585 100%);
  border-radius: .5rem;
  font-weight: bold;
}
</style>


